.root {
  margin-top: var(--mantine-spacing-xl);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--mantine-spacing-xl);
  @media (min-width: $mantine-breakpoint-xs) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.button {
  display: block;
  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  border-radius: var(--mantine-radius-sm);
  &:hover {
    color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
    &:not(:active) {
      background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
    }
  }
  &:active {
    background: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
    transform: translateY(1px);
  }
  @media (min-width: $mantine-breakpoint-xs) {
    flex: 0 0 calc(50% - var(--mantine-spacing-xl) / 2);
  }
}
